<template>
  <div class="MessagePinglun">
    <div class="main">
      <div class="content">
        <article>
          <section>
            <RichText @Sub="handleSubmit" :submitting="submitting"></RichText>
          </section>
          <section>
            <p v-if="commentList.length===0" class="no-more">还没有评论</p>
            <ul v-else>
              <li v-for="(item,index) in commentList" :key="item.id">
                <div class="comment-parent">
                  <div
                      class="p-img"
                      :style="{backgroundImage:'url('+item.personHeadImg+')'}"
                      @click="goToUser(item.user.user)"
                  ></div>
                  <div class="p-info">
                    <div class="p-name" style="margin-left:5px;">
                      {{item.person.userName}}
                      <span class="admin" v-if="item.person.type === '8'">站长</span>
                      <span class="browser">{{item.browserInfo}}</span>
                    </div>
                    <div class="p-content" style="margin-left:15px;" v-html="item.message"></div>
                    <div class="p-time">
                      <span>
                        <i
                            class="el-icon-location-outline"
                            style="margin-right:20px;"
                        >{{item.address}}</i>
                        {{makeDate(item.createTime)}}
                      </span>
                      <a
                          @click="replyClick(index)"
                      >{{replayIndex===index&&replayChildIndex===undefined?"收起":"回复"}}</a>
                    </div>
                  </div>
                </div>
                <div
                    class="comment-child"
                    v-for="(childItem,childIndex) in item.replays"
                    :key="childItem.id"
                >
                  <div
                      class="c-img"
                      :style="{backgroundImage:'url('+childItem.person1.headImg+')'}"></div>
                  <!--                    @click="goToUser(childItem.user.user)"-->
                  <!--                  ></div>-->
                  <div class="c-info">
                    <div class="c-name">
                      <span class="name">
                        {{childItem.person1.userName}}
                        <span class="admin" v-if="childItem.person1.type === '8'">站长</span>
                        <span class="browser">{{childItem.browserInfo}}浏览器</span>
                      </span>回复
                      <span class="name">{{childItem.person2.userName}}</span>
                      <span class="admin" v-if="childItem.reUser === 'admin'">站长</span>
                      <p
                          style="margin:5px 0 0 15px; width:500px;word-break:normal;white-space:pre-warp;word-wrap:break-word;font-size:15px;color:rgb(235,235,255);"
                          v-html="childItem.message"
                      ></p>
                    </div>
                    <div class="c-time">
                      <span>
                        <i
                            class="el-icon-location-outline"
                            style="margin-right:20px;"
                        >{{childItem.location}}</i>
                        {{makeDate(childItem.createTime)}}
                      </span>
                      <a
                          @click="replyClick(index,childIndex)"
                      >{{replayIndex===index&&replayChildIndex===childIndex?"收起":"回复"}}</a>
                    </div>
                  </div>
                </div>
                <div :class="['comment-reply',{'show':replayIndex===index}]">
                  <textarea
                      v-model="replay.content"
                      :placeholder="'回复【'+replay.replayPersonTwoName+'】：'"
                  ></textarea>
                  <button
                      @click="childCommit(index)"
                      type="button"
                      class="layui-btn layui-btn-xs"
                  >提交</button>
                </div>
              </li>
            </ul>
          </section>
        </article>

      </div>

    </div>
  </div>
</template>

<script>
import RichText from "../components/RichText";
import request from "../api";
import {makeSimpleDate,makeDate} from "../assets/js/dateformat"
const postIfLogin = request.postIfLogin;
const commitMessage = request.commitMessage;
const getMessageList = request.getMessageList;
const commitChildMessage = request.commitChildMessage;
export default {
  name: "pinglun",
  props:['blogId'],
  components:{
    RichText
  },
  data() {
    return {
      replayIndex:'',//回复的第一回复下标数
      replayChildIndex:'',//回复的第二回复下标数
      commentList: [],
      user:{},
      page:1,
      replay:{
        content:'',//回复信息
        replayPersonTwoId:'',//被回复人id
        replayPersonTwoName:'',//被回复人姓名
        liuyanId:''
      },
      ifLoding: false,
      submitting: false,
      isEnd:false,
    };
  },
  methods: {
    postIfLoginFn() {
      console.log("开始校验是否登录");
      console.log(this.$store.state.user);
      this.user = this.$store.state.user;
      if (JSON.stringify(this.user) !== "{}") {
        this.ifLogin = true;
        this.$emit("postLogin");
      }else{
        this.ifLogin = false;
      }
    },
    toTwo(num) {
      return (num < 10 ? "0" : "") + num;
    },
    makeSimpleDate(date){
      return makeSimpleDate(date);
    },
    makeDate(date){
      return makeDate(date);
    },
    goToUser(user) {
      this.$router.push(`/user/${user}`);
    },
    handleSubmit: function (val) {
      this.submitting = true;
      this.user = this.$store.state.user;
      if (JSON.stringify(this.user) !== "{}") {
        console.log("开始提交留言");
        //登陆了，就发送数据到数据库 -- 执行留言提交的ajax
        if(!val){
          layer.msg("请输入留言内容 再点击提交", {icon: 2});
          return;
        }
        var loading = layer.load(0, {
          shade: false,
          time: 10*1000
        });
        this.$ajax.post(this.$config.url + "/ljblog/liuyan/commitLiuyan", {
          personId: this.user.id,
          message: val,
          blogid: this.blogId,
          location: "神秘的位置",
        }).then((res) => {
          layer.close(loading);
          this.submitting = false;
          if (res.data.status === this.$config.request_code_success) {
            layer.msg("留言成功", {icon: 1});
            this.getLiuyanList(this.blogId, true);
          } else {
            layer.msg(res.data.message, {icon: 2});
            this.getLiuyanList(this.blogId, true);
          }
        }).catch(() => {
          layer.close(loading);
            this.submitting = false;
            layer.msg("服务器错误~请稍后再试", {icon: 2});
          });
      } else {
        //未登录
        layer.msg("请先登录", {icon: 2});
      }
    },
    replyClick(pIndex, cIndex) {
      if(pIndex===undefined) return ;
      console.log(this.replayIndex===pIndex&&this.replayChildIndex===cIndex);
      if(this.replayIndex===pIndex&&this.replayChildIndex===cIndex){//收起回复
        this.replayIndex="";
        this.replayChildIndex="";
        return;
      }else{//展开回复
        this.replayIndex=pIndex;
        this.replayChildIndex=cIndex;
      }
      this.replay.liuyanId=this.commentList[pIndex].id;
      if(cIndex!==undefined){//不为null 是子留言
        this.replay.replayPersonTwoName=this.commentList[pIndex].replays[cIndex].person1.userName;
        this.replay.replayPersonTwoId=this.commentList[pIndex].replays[cIndex].person1.id;
      }else{//父留言
        this.replay.replayPersonTwoName=this.commentList[pIndex].person.userName;
        this.replay.replayPersonTwoId=this.commentList[pIndex].person.id;
      }
    },
    childCommit(pIndex) {
      //判断登录
      this.user = this.$store.state.user;
      if (JSON.stringify(this.user) !== "{}") {
        //登陆了，就发送数据到数据库 -- 执行留言提交的ajax
        console.log("开始回复");
        if(!this.replay.content){
          layer.msg("请输入留言内容 再点击提交", {icon: 2});
          return;
        }
        var loading = layer.load(0, {
          shade: false,
          time: 10*1000
        });
        this.$ajax.post(this.$config.url + "/ljblog/replay/insertReplay",{
          liuyanId: this.replay.liuyanId,
          replayPersonTwo: this.replay.replayPersonTwoId,
          message: this.replay.content,
          location: "神秘的位置",
          replayPersonOne:this.user.id
        }).then((res) => {
          layer.close(loading);
          if (res.data.status === this.$config.request_code_success) {
            layer.msg("留言成功", {icon: 1});
            this.getLiuyanList(this.blogId, true);
          } else {
            layer.msg(res.data.message, {icon: 2});
            this.getLiuyanList(this.blogId, true);
          }
        }).catch(() => {
          this.submitting = false;
          layer.close(loading);
          layer.msg("服务器错误~请稍后再试", {icon: 2});
        });
      } else {
        //未登录
        layer.msg("请先登录", {icon: 2});
      }
    },
    handleScroll() {
      if (this.ifLoding) return;
      //文档高
      let c = document.documentElement.offsetHeight;
      //滚动高
      let a = document.documentElement.scrollTop;
      //可视区高
      let b = document.documentElement.clientHeight;

      if (a + b >= c - 50) {
        this.ifLoding = true;
        if(!this.isEnd){
          this.getLiuyanList(this.blogId,false)
        }
        this.ifLoding = false;
      }
    },
    getLiuyanList( blogId,boolean){//boolean为false是表面是页面继续增加页数,true代表获取第一页
      if(!boolean){
        this.page++;
        this.$ajax.post(this.$config.url +`/ljblog/liuyan/getLiuyanList/${this.page}`,{
          "blogid":blogId
        }).then(res => {
          this.ifLoding = false;
          if(res.data.status===this.$config.request_code_success){
            if (res.data.data.size!==0) {
              this.commentList.push(res.data.data.list);
            } else {
              this.ifNoMore = true;
              this.isEnd=true;
              console.log(this.isEnd);
            }
          }else{
            this.$message.error("服务器出错了，请联系我，感谢")
          }
        });
      }else{
        this.page=1;
        this.$ajax.post(this.$config.url +`/ljblog/liuyan/getLiuyanList/${this.page}`,{
          "blogid":blogId
        }).then(res => {
          if(res.data.status===this.$config.request_code_success){
            this.commentList=res.data.data.list
          }else{
            this.$message.error("服务器出错了，请联系我，感谢")
          }
        });
      }
    },
  },
  created() {
    this.getLiuyanList(this.blogId,true);
  },
  mounted() {
    //发送第一次请求
    // postIfLogin(localStorage.getItem("token"))
    //     .then((res) => {})
    //     .catch();
    //监听滚动事件
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    //移除监听滚动事件
    window.removeEventListener("scroll", this.handleScroll);
  },
}
</script>

<style scoped lang="less">
.MessagePinglun {
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateY(180px);
  }
  .v-enter-active,
  .v-leave-active {
    transition: 1s;
  }
  > .main {
    box-sizing: border-box;
    max-width: 1360px;
    margin: 0 auto;
    > .content {
      width: 100%;
      > article {
        section:nth-child(1) {
          box-sizing: border-box;
          width: 100%;
          padding: 20px 15px;
          background: white;
          border-radius: 20px 20px 0px 0px;
          > h2 {
            font-weight: 700;
            font-size: 2rem;
            text-align: center;
          }
          > p {
            font-size: 1.25rem;
            margin: 1rem 0;
            text-align: center;
          }
        }
        section:nth-child(2) {
          box-sizing: border-box;
          border-radius: 0px 0px 20px 20px;
          padding: 20px 15px;
          width: 100%;
          color: #ebebff;
          background-color: rgba(0, 0, 0, 0.61);
          > ul {
            width: 100%;
            > li {
              padding: 20px 0;
              border-bottom: 1px dotted #333;
              .comment-parent {
                display: flex;
                .p-img {
                  width: 45px;
                  height: 45px;
                  border-radius: 50%;
                  margin-right: 5px;
                  background-position: center center;
                  background-color: #ddd;
                  background-size: cover;
                }
                .p-info {
                  flex: 1;
                  padding-bottom: 20px;
                  border-bottom: 1px dotted #aaa;
                  .p-name {
                    color: #01aaed;
                    .admin {
                      margin: 0 5px 0 1px;
                      display: inline-block;
                      box-sizing: border-box;
                      width: 35px;
                      height: 18px;
                      padding: 1px 5px 0;
                      font-size: 12px;
                      text-align: center;
                      border-radius: 5px;
                      background-color: #096;
                      color: #fff;
                    }
                    .browser {
                      margin-left: 5px;
                      color: #24d99d;
                    }
                  }
                  .p-content {
                    padding: 5px 0;
                    min-height: 30px;
                    font-size: 16px;
                    line-height: 30px;
                    word-break: break-all;
                  }
                  .p-time {
                    font-size: 12px;
                    color: #ebebff;
                    span {
                      padding-left: 15px;
                      padding-right: 15px;
                    }
                    a {
                      color: #50ff4e;
                      cursor: pointer;
                    }
                  }
                }
              }
              .comment-child {
                display: flex;
                box-sizing: border-box;
                width: 100%;
                padding-left: 50px;
                padding-top: 20px;
                .c-img {
                  width: 45px;
                  height: 45px;
                  border-radius: 50%;
                  margin-right: 5px;
                  background-position: center center;
                  background-color: #ddd;
                  background-size: cover;
                }
                .c-info {
                  flex: 1;
                  font-size: 12px;
                  .c-name {
                    .name {
                      color: #01aaed;
                      margin: 0 5px;
                    }
                    .admin {
                      margin: 0 5px 0 1px;
                      display: inline-block;
                      box-sizing: border-box;
                      width: 35px;
                      height: 18px;
                      padding: 1px 5px 0;
                      font-size: 12px;
                      text-align: center;
                      border-radius: 5px;
                      background-color: #096;
                      color: #fff;
                    }
                    .browser {
                      margin-left: 5px;
                      color: #24d99d;
                    }
                  }
                  .c-time {
                    padding-left: 20px;
                    padding-top: 5px;
                    color: #ebebff;
                    span {
                      margin-right: 10px;
                    }
                    a {
                      cursor: pointer;
                      color: #50ff4e;
                    }
                  }
                }
              }
              .comment-reply {
                overflow: hidden;
                box-sizing: border-box;
                width: 100%;
                height: 0;
                padding-left: 50px;
                padding-top: 10px;
                transition: height 0.3s;
                &.show {
                  height: 100px;
                }
                textarea {
                  display: block;
                  width: 100%;
                  height: 60px;
                  border-color: #aaa;
                  padding: 10px;
                  box-sizing: border-box;
                  resize: none;
                }
                button {
                  margin-top: 8px;
                  display: block;
                }
              }
            }
          }
          > .no-more{
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            border-radius: 15px;
          }
        }

      }
    }
  }

}
@media (max-width: 1008px) {
  .Message {
    > .main {
      padding: 70px 20px;
    }
  }
}
</style>